<template>
  <div class="account-info">
    <Header />
    <div class="account-container">
      <h2>Seller Account Information</h2>
      <div class="card-content">
        <div class="content-left">
          <div class="card-item">
            <div class="card-body" style="border-radius: 8px 8px 0 0;">
              <div class="card-info-item">
                <p class="font-1">Welcome</p>
                <p class="font-2">Your Seller</p>
              </div>
              <div class="card-info-item">
                <p class="font-1">jinanletongdianzishangmaoyouxiangongsi <span class="font-2">(Edit)</span></p>
                <p class="font-2">Profile</p>
              </div>
            </div>
          </div>
          <div class="card-item">
            <div class="card-header">
              <p class="font-1">Listings Status</p>
              <p class="font-2">Going on a vacation?</p>
            </div>
            <ul class="service-list">
              <li>
                <p class="font-1">Current Status of Listings:</p>
                <div>
                  <p class="font-3">Active (Listings available for sale on Amazon)</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="card-item">
            <div class="card-header">
              <p class="font-1">Your Services</p>
              <p class="font-2">Manage</p>
            </div>
            <ul class="service-list">
              <li>
                <p class="font-1">Selling On Amazon</p>
                <div>
                  <p class="font-3">Professional</p>
                  <p class="font-4">( Amazon.com, Amazon.ca, Amazon.com.mx )</p>
                </div>
              </li>
              <li>
                <p class="font-1">Amazon Business</p>
                <div>
                  <p class="font-3">Registered</p>
                  <p class="font-4">( Amazon.com, Amazon.ca )</p>
                </div>
              </li>
              <li>
                <p class="font-1">Fulfillment by Amazon</p>
                <div>
                  <p class="font-3">Registered</p>
                  <p class="font-4">( Amazon.com, Amazon.ca, Amazon.com.mx )</p>
                </div>
              </li>
              <li>
                <p class="font-1">Customer Service by Amazon</p>
                <div>
                  <p class="font-3">Ready to opt-in</p>
                  <p class="font-4">( Amazon.com )</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-center">
          <div class="card-item">
            <div class="card-header">
              <p class="font-1">Payment Information</p>
            </div>
            <div class="card-body">
              <p class="font-5">Deposit Methods</p>
              <p class="font-5">Charge Methods</p>
            </div>
          </div>
          <div class="card-item">
            <div class="card-header">
              <p class="font-1">Business Information</p>
            </div>
            <div class="card-body">
              <p class="font-5">Business Address</p>
              <p class="font-5" @click="handleToPage('/sw/AccountInfo/LegalEntity/step/LegalEntity')">Legal Entity</p>
              <p class="font-5">Official Registered Address</p>
              <p class="font-5">Merchant Token</p>
              <p class="font-5">Manage your brands</p>
              <p class="font-5">Language for feed processing report</p>
              <p class="font-5">Display Name</p>
            </div>
          </div>
          <div class="card-item">
            <div class="card-header">
              <p class="font-1">Shipping and Returns Information</p>
            </div>
            <div class="card-body">
              <p class="font-5">Return Address</p>
              <p class="font-5">Shipping Settings</p>
              <p class="font-5">International Returns Providers</p>
              <p class="font-5">Buy Shipping Preferences</p>
            </div>
          </div>
          <div class="card-item">
            <div class="card-header">
              <p class="font-1">Tax Information</p>
            </div>
            <div class="card-body">
              <p class="font-5">Tax Information</p>
              <p class="font-5">VAT Information</p>
              <p class="font-5">RFC ID</p>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="card-item">
            <div class="card-header">
              <p class="font-1">FAQ</p>
            </div>
            <div class="card-body">
              <p class="font-6">How do I update my tax information and legal name?</p>
              <p class="font-6">I signed up for an account by mistake or don’t need it anymore. How do I close the account?</p>
              <p class="font-6">I am taking time off (vacation). How can I temporarily deactivate my listings?</p>
              <p class="font-6">Why are my items no longer for sale?</p>
              <p class="font-6">Why did my credit card have an error or have 'Invalid Information'?</p>
            </div>
          </div>
          <div class="card-item">
            <div class="card-header">
              <p class="font-1">Account management</p>
            </div>
            <div class="card-body">
              <p class="font-5">Notification Preferences</p>
              <p class="font-5">Login Settings (Change Name, E-mail, Password and Security Settings)</p>
              <p class="font-5">User Permissions</p>
              <p class="font-5">Downgrade Account</p>
              <p class="font-5">Close account</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
  components: { Header, Footer },
  methods: {
    handleToPage (path) {
      this.$router.push({
        path,
        query: { ref: 'macs_ailegent_cont_acinfohm' }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.account-info {
  .account-container {
    padding: 14px 18px 18px;
  }
  h2 {
    padding: 16px 0 4px;
    line-height: 24px;
    font-size: 18px;
    font-weight: 600;
    color: #c45500;
  }
  .card-content {
    display: flex;

    .card-item {
      margin-top: 16px;
      border-radius: 8px;
      border: 1px solid #D5D9D9;
    }
    .card-header {
      padding: 6px 10px;
      display: flex;
      justify-content: space-between;
      border-radius: 8px 8px 0 0;
      background-color: #F0F2F2;
      border-bottom: 1px solid #D5D9D9;
    }
    .card-body {
      padding: 14px 18px;
      border-radius: 0 0 8px 8px;
    }
    .card-info-item {
      display: flex;
      justify-content: space-between;
    }
    .service-list {
      li {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e7e7e7;
        .font-1 {
          width: 52.43%;
          padding: 7px 14px 6px;
          text-align: right;
        }
        div {
          flex: 1;
          padding: 7px 14px 6px;
        }
      }
    }
    .font-1 {
      font-weight: 600;
      line-height: 20px;
    }
    .font-2 {
      font-weight: 600;
      color: #007185;
      line-height: 20px;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
    .font-4 {
      font-size: 12px;
      color: #666;
      line-height: 14px;
    }
    .font-5 {
      padding-bottom: 10px;
      color: #007185;
      line-height: 20px;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
    .font-6 {
      font-size: 12px;
      font-weight: 600;
      color: #007185;
      line-height: 20px;
      margin-bottom: 22px;
      cursor: pointer;
      text-decoration: underline;
      &:last-of-type {
        margin-bottom: 0;
      }
    }

    .content-left {
      width: 26.66%;
    }

    .content-center {
      box-sizing: initial;
      width: 51.58%;
      padding: 0 20px;
      .card-body {
        display: flex;
        flex-wrap: wrap;
        p {
          width: 39.296%;
          margin-right: 4%;
        }
      }
    }

    .content-right {
      width: 21.75%;
    }
  }
}
</style>
